<script setup>
	import { uniFetch } from '../../../api/uni-fetch';
	import {
		ref
	} from "vue";

	// 订单号复制
	function copyClick(item) {
		const dataToCopy = typeof item === 'string' ? item : JSON.stringify(item);
		uni.setClipboardData({
			data: dataToCopy,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			},
			fail: (err) => {
				// 复制失败提示
				console.log(err, 'eeeerrr');
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}

	const props = defineProps({
		orderList: {
			type: Array,
			default: [],
		},
		isRefund: {
			type: Number,
			default: 0,
		},
	});
	console.log(props.orderList);

	//  status  0 待发货 1 带收货 2 已送达 3 订单完成 4 退货
	// pay_status = 0 未付款
	// pay_status = 1 已付款
	function goDetail(id) {
		uni.navigateTo({
			url: "/pages/endShopping/endShopping?orderId=" + id,
		});
	}

	// 支付
	function getDmgpay(ev) {
		uniFetch.post("/order/partner-pay", {
			id: ev.id,
		}).then(
			(res) => {
				// #ifdef MP-WEIXIN
				wx.requestPayment({
					timeStamp: res.data.timestamp + "",
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						setTimeout(() => {
							uni.redirectTo({
								url: "/subpkg/orderList/orderList",
							});
						}, 1000);
					},
					fail: function(err) {
						console.log(err, "失败返回");
					},
					complete: function(rej) {
						console.log(rej, "失败原因返回");
					},
				});
				// #endif

				// // #ifdef MP-ALIPAY
				// console.log(res, 'jinlaile!!!@@@');

				// my.tradePay({
				// 	// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
				// 	tradeNO: res.data.trade_no,
				// 	success: (res) => {
				// 		console.log(res, '成功了');
				// 		setTimeout(() => {
				// 			uni.redirectTo({
				// 				url: "/skgPagesA/orderDta/orderDta",
				// 			});
				// 		}, 1000);
				// 	},
				// 	fail: (err) => {
				// 		console.log(err, "失败返回");
				// 	},
				// });
				// // #endif
			},
			(err) => {
				console.log(err);
			}
		);
	}

	// 退款
	function payRefund(item) {
		uniFetch.post("/order/detail", {
			id: item.id,
		}).then((res) => {
			let items = JSON.stringify(res.data);
			uni.navigateTo({
				url: "/subpkg/payRefund/payRefund?order=" + items,
			});
		});
	}

	const expandedState = ref({});

	function toggleExpand(orderId) {
		expandedState.value[orderId] = !expandedState.value[orderId];
	}
</script>

<template>
	<view class="orderList">
		<view class="order-card-item" @click="goDetail(item.id)" v-for="item in orderList" :key="item.order_no">
			<view class="card-nav">
				<view class="order-code">
					<span class="vertical"></span>
					<text class="fs28 fbold mr10 w250" style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            ">{{ item.device_name || "智慧新零售" }}</text>
				</view>
				<view style="flex: 1;">
					<view class="fs25" style="display: flex; justify-content: flex-end;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
						@click.stop="copyClick(item.order_no)"
					>{{ item.order_no }}</view>
					<view class="status sf" v-if="!isRefund">
						{{
							item.pay_status == 0
							  ? item.pay_type == 99
								? "待付款"
								: "结算中"
							  : item.pay_status == 1
							  ? "已结算"
							  : item.pay_status == 4
							  ? "扣款中"
							  : item.pay_status == 3
							  ? "无需支付"
							  : item.pay_status == 99
							  ? "已退款"
							  : "订单取消"
						  }}
					</view>
					<view class="status sf" v-else>
						{{
							item.refund.status == 2
							  ? "已退款"
							  : item.refund.status == 0
							  ? "审核中"
							  : item.refund.status == 1
							  ? "退款中"
							  : item.refund.status == 99
							  ? "审核不通过"
							  : "退款失败"
						  }}
					</view>
				</view>
			</view>

			<view class="goods-list-container" v-if="item.goods.length">
				<view v-for="(goods, index) in expandedState[item.id]
            ? item.goods
            : item.goods.slice(0, 1)" :key="index" class="buy-info">
					<!-- 原有商品内容保持不变 -->
					<view class="flexRow jStart">
						<view class="goods-image">
							<image lazy-load :src="goods.banner" mode="aspectFit"></image>
						</view>
						<view class="goods-title sf ml14">
							{{ goods.goods_name }}
						</view>
					</view>
					<view class="right-area">
						<view class="pay-info">
							<view class="money">
								<span style="font-size: 28rpx">¥</span>
								{{ goods.amount }}
							</view>
							<view class="money mb14">x {{ goods.count }}</view>
						</view>
					</view>
				</view>

				<!-- 展开提示 -->
				<view v-if="item.goods.length > 1 && !expandedState[item.id]" class="expand-tip"
					@click.stop="toggleExpand(item.id)">
					<view class="gradient-overlay"></view>
					<text class="expand-text">展开</text>
				</view>
				<view v-if="item.goods.length > 1 && expandedState[item.id]" class="expand-tip"
					@click.stop="toggleExpand(item.id)">
					<view class="gradient-overlay"></view>
					<text class="expand-text">收起</text>
				</view>
			</view>
			<view v-else class="fs28" style="color: #c5c5c5; text-align: center">未购买商品</view>

			<view class="settle-accounts">
				<span v-if="!item.refund && item.goods.length" class="mr14">
					共 {{ item.goods.length }} 件商品
				</span>
				已付:
				<text class="mr14 colorRed">
					<text class="fs24">¥</text>
					<text class="fs30">
						{{ item.amount }}
					</text>
				</text>

				优惠抵扣:
				<text class="colorRed">
					<text class="fs24">¥</text>
					<text class="fs30"> {{ item.discount }}</text>
				</text>

				<span v-if="item.refund">
					退款:
					<text class="colorRed">
						<text class="fs24">¥</text>
						<text class="fs30">
							{{ item.refund.total_amount }}
						</text>
					</text>
				</span>
			</view>

			<view class="control-button">
				<button class="cancel" hover-class="cancel-click" v-if="
            item.amount > 0 &&
            item.pay_status != 0 &&
            !isRefund &&
            item.pay_status !== 2
          " @click.stop="payRefund(item)">
					<view class="refund">申请退款</view>
				</button>
				<button class="paynow" hover-class="cancel-click" v-if="
            item.pay_status == 0 && (item.pay_type == 99 || item.pay_type == 98||item.pay_type == 97)
          " @click.stop="getDmgpay(item)">
					立即支付
				</button>
			</view>
		</view>
		<view v-if="!orderList.length" style="background-color: #fff; width: 100vw; height: 100vh">
			<Empty text="暂无订单"></Empty>
		</view>
	</view>
</template>

<style lang="scss">
	.orderList {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx 0 35rpx 0;

		.order-card-item {
			width: 695rpx;
			padding: 35rpx 40rpx;
			margin-bottom: 25rpx;
			background-color: #fefefe;
			border-radius: 21rpx;
			border: #eeeeee 1rpx solid;
			width: 94vw;
			box-sizing: border-box;

			.card-nav {
				height: 65rpx;
				margin-bottom: 20rpx;
				display: flex;

				.order-code {
					font-size: 26rpx;
					// float: left;
					display: flex;
					align-items: flex-start;

					.vertical {
						line-height: 28rpx; 
						background-color: #2879d0;
						width: 8rpx;
						height: 28rpx;
						display: block;
						border-radius: 16rpx;
						margin-right: 12rpx;
					}
					text {
						line-height: 28rpx; 
					}
				}

				.status {
					float: right;
				}
			}

			.buy-info {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-right: 20rpx;
				margin-bottom: 20rpx;

				.goods-image {
					float: left;

					image {
						width: 140rpx;
						height: 140rpx;
					}
				}

				.goods-title {
					width: 69%;
					/* 确保有足够的宽度 */
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 4;
					/* 限制显示3行 */
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					/* 设置合理的字体大小 */
				}

				.right-area {
					float: left;
					height: 100rpx;

					.pay-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 30rpx;
						width: 100%;
						height: 100rpx;
						flex-direction: column;
						align-items: flex-end;

						.money {
							color: #bab9ba;
							margin-left: 20rpx;
							font-size: 26rpx;
						}
					}
				}
			}

			.settle-accounts {
				height: 70rpx;
				line-height: 70rpx;
				text-align: right;
				display: block;
				font-size: 26rpx;

				// text {
				//   font-size: 30rpx;
				//   color: red;
				// }
			}

			.control-button {
				display: flex;
				justify-content: flex-end;
				padding-top: 20rpx;

				button {
					margin: 0 0 0 20rpx;
					width: 195rpx;
					height: 66rpx;
					line-height: 64rpx;
					border-radius: 40rpx;
					text-align: center;
					font-size: 28rpx;

					&:after {
						border: none;
					}
				}

				.cancel {
					background-color: #2879d0;
					color: #fff;
				}

				.cancel-click {
					background-color: #eeeeee;
				}

				.paynow {
					color: #fff;
					background-color: #2879d0;
				}
			}
		}
	}

	// 新增样式
	.goods-list-container {
		position: relative;
		min-height: 140rpx; // 单个商品高度
	}

	.expand-tip {
		position: relative;
		height: 80rpx;
		margin-top: -40rpx;

		.gradient-overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 80rpx;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 1) 100%);
		}

		.expand-text {
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translateX(-50%);
			color: #2879d0;
			font-size: 26rpx;
			padding: 8rpx 30rpx;
			border-radius: 30rpx;
			background-color: rgba(255, 255, 255, 0.9);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			z-index: 2;
		}
	}
</style>